<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仁爱宠物医院</title>
  <link rel="stylesheet" href="../css/home.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="goodsInfo">
    <!-- 页面头部 -->
    <header>
      <div style="display: flex;">
        <div class="container">
          <div class="row">
            <div class="col-lg-1" style="text-align: right;">
              <img src="../img/cat-foot.svg" height="40px" width="40px" />
            </div>
            <div class="col-lg-2" style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
              <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
            </div>
            <div class="col-lg-7">
              <ul style="font-family: 得意黑;">
                <li class="li_header"><a class="a_header" href="./home.html">首页</a></li>
                <li class="li_header"><a class="a_header" href="./about.html">关于仁爱</a></li>
                <li class="li_header"><a class="a_header" href="./service.html">服务项目</a></li>
                <li class="li_header"><a class="a_header" href="./keep_a_pet.html">养宠小百科</a></li>
                <li class="li_header"><a class="a_header" href="./join_us.html">加入我们</a></li>
                <li class="li_header"><a class="a_header" href="./shop.html">线上商店</a></li>
                <li class="li_header"><a class="a_header" href="./message.html">在线留言</a></li>
                <li id="li_1" class="li_header"><a class="a_header" href="./login.html">登录/注册</a></li>
                <li id="li_2" class="li_header"><a class="a_header" href="./userinfo.html">个人中心</a></li>
              </ul>
            </div>
            <div class="col-lg-2" style="text-align: left;overflow: hidden; position: relative;">
              <input type="text" style="margin-top: 8px;" v-model="goodsName">
              <img @click="search()" src="../img/search.png" alt="" width="23px" height="23px"
                style="position: absolute; top: 11px; left: 135px; cursor: pointer;">
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 商品 -->
    <section style="margin: 5%;">
      <div class="container">
        <div class="row">
          <div class="col-md-6" style="padding-left: 10%;">
            <img :src="url+'/download/'+ruleForm.img" width="90%" alt="">
          </div>
          <div class="col-md-6">
            <h3 style="font-weight: 700;">{{ ruleForm.name }}</h3>
            <div style="display: flex;margin: 3% 0;">
              <span>说明</span>
              <h6 style="width: 80%;margin-left: 5%;">{{ ruleForm.notes }}</h6>
            </div>
            <div style="display: flex;margin: 3% 0;">
              <span>价格</span>
              <h3 style="width: 80%;margin-left: 5%;font-weight: 700;color: red;">{{ ruleForm.price }}￥</h3>
            </div>
            <div style="display: flex;margin: 3% 0;">
              <span>库存</span>
              <h5 style="width: 80%;margin-left: 5%;">{{ ruleForm.inventory }}</h5>
            </div>
            <div style="display: flex;margin: 3% 0;">
              <span>类型</span>
              <h5 style="width: 80%;margin-left: 5%;">{{ ruleForm.goodtype }}</h5>
            </div>
            <div style="display: flex;margin: 3% 0;">
              <span>配送说明</span>
              <h5 style="width: 80%;margin-left: 5%;">全国可发</h5>
            </div>
            <div style="display: flex;margin: 3% 0;">
              <span>发货方式</span>
              <h5 style="width: 80%;margin-left: 5%;">快递</h5>
            </div>
            <div style="display: flex;">
              <el-button type="primary" round @click="AddCar()">加入购物车</el-button>
              <el-button type="success" round @click="BuyNow()">立即购买</el-button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 页尾 -->
    <footer style="background-color: #2f2d53;height: 350px; overflow: hidden; padding-top: 5%;">
      <div class="container">
        <div style="display: flex; padding-left: 20%;">
          <div style="width: 35%;">
            <div style="display: flex;">
              <div style="text-align: right;">
                <img src="../img/cat-foot.svg" height="40px" width="40px" />
              </div>
              <div style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
                <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
              </div>
            </div>
            <div style="color: #fff; margin-top: 5%;">
              <span>
                宠物护理和兽医服务对于维持<br>我们心爱的动物伴侣的健康和福祉至关重要
              </span>
            </div>
          </div>
          <div style="display: flex; width: 65%;">
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">快速链接</h4><br>
              <h6><a style="color: #fff !important;" href="./about.html">关于我们</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">服务项目</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">线上商店</a></h6>
            </div>
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">法律</h4><br>
              <h6 style="color: #fff;">常见问题</h6><br>
              <h6 style="color: #fff;">条款及细则</h6><br>
              <h6 style="color: #fff;">隐私与政策</h6>
            </div>
          </div>
        </div>
        <span style="color: #fff; display: block; text-align: center; font-size: 14px; margin-top: 2%;">©2024年
          版权所有仁爱宠物医院</span>
      </div>
    </footer>
    <!-- 立即购买弹窗 -->
    <el-dialog title="购买" :visible.sync="dialogVisible" width="30%">
      <span>该商品的价格为<span style="color: red;">{{ruleForm.price}}￥</span>,确定要购买吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="queryBuy()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>
<script>
  new Vue({
    el: '#goodsInfo',
    data() {
      return {
        ruleForm: {},
        dialogVisible: false,
        dataForm: {},
        url: 'http://localhost:8082/common',
        name: '',
        goodsName:''
      }
    },
    created() {
      this.page_init();
    },
    methods: {
      search(){
        localStorage.setItem("name",this.goodsName);
        window.location.href = './shop.html'
      },
      // 页面初始化
      async page_init() {
        const { data: result } = await this.$http.get("http://localhost:8082/goods/queryOne/" + localStorage.getItem("goodsId"));
        if (result.flag) {
          // 数据
          this.ruleForm = result.l;
        }
      },
      // 查询用户
      async querUser() {
        const { data: result } = await this.$http.get("http://localhost:8082/user/queryUser/" + localStorage.getItem("userId"));
        if (result.flag) {
          this.name = result.l.name;
        }
      },
      //通用方法
      AddOrderAndCar() {
        if (!localStorage.getItem("userId")) {
          window.location.href = './login.html';
          return;
        }
        // 清空数据
        this.dataForm = {};
        this.querUser();
      },

      // 添加到购物车
      async AddCar() {
        this.AddOrderAndCar();
        // 设置数据
        this.dataForm.uid = localStorage.getItem("userId");
        this.dataForm.goodsImg = this.ruleForm.img;
        this.dataForm.goodsName = this.ruleForm.name;
        this.dataForm.price = this.ruleForm.price;
        this.dataForm.sid = this.ruleForm.id;
        this.dataForm.uname = this.name;
        this.dataForm.count = 1;
        const { data: result } = await this.$http.post("http://localhost:8082/car/insert/", this.dataForm);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
      },
      // 立即购买
      BuyNow() {
        this.dialogVisible = true;
      },
      // 确定购买
      async queryBuy() {
        if (!localStorage.getItem("userId")) {
          window.location.href = './login.html'
        }
        this.AddOrderAndCar();
        this.dataForm.name = this.ruleForm.name;
        this.dataForm.img = this.ruleForm.img;
        this.dataForm.totalprice = this.ruleForm.price;
        this.dataForm.goodtype = this.ruleForm.goodtype;
        this.dataForm.count = 1;
        this.dataForm.uid = localStorage.getItem("userId");
        this.dataForm.uname = this.name;
        this.dataForm.sid = localStorage.getItem("goodsId");
        // 新增到订单中
        const { data: result } = await this.$http.post("http://localhost:8082/orders/insert", this.dataForm);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
        this.dialogVisible = false;
        // 刷新页面
        this.page_init();
      }
    }
  })
</script>

</html>